<template>
  <el-dialog v-model="visible" :append-to-body="true" :draggable="true" width="350px">
    <div class="animated fadeIn">
      <!-- v-click-outside="close()" -->
      <el-container class="container">
        <el-header class="no-padding header" height="180px">
          <el-icon @click="close" class="close pointer"><ele-CircleCloseFilled /></el-icon>
          <div class="img-banner">
            <img v-if="detail.bag" :src="detail.bag" class="img-banner" />
            <div class="img-banner-error"></div>
          </div>
          <div class="user-header">
            <div class="avatar">
              <div class="avatar-box">
                <el-image
                  style="width: 70px; height: 70px;border-radius:50%"
                  :src="detail.avatar"
                  :zoom-rate="1.2"
                  :preview-src-list="[detail.avatar]"
                  :initial-index="4"
                  fit="cover"
                >
                  <template #error>
                    <el-image :src="detaultAvatar" style="width: 70px; height: 70px;border-radius:50%"></el-image>
                  </template>
                </el-image>
              </div>
            </div>
            <div class="nickname">
              <el-icon><ele-EditPen /></el-icon>
              <span>{{ detail.nickname || '未设置昵称' }}</span>
              <!-- <div class="share no-select">
                  <el-icon><ele-Share /></el-icon>
                  <span>分享</span>
              </div> -->
            </div>
          </div>
        </el-header>
        <el-main class="no-padding main">
          <div class="user-sign">
            <div class="sign-arrow"></div>
            <el-icon size="15px" style="top:3px; margin-right:5px"><ele-Edit /></el-icon>
            <span>编辑个签，展示我的独特态度。 </span>
          </div>

          <div class="card-rows no-select">
            <div class="card-row">
              <label>手机</label>
              <span>{{ filterMobile(detail.mobile) }}</span>
            </div>
            <div class="card-row">
              <label>昵称</label>
              <span>{{ detail.nickname || '未设置昵称' }}</span>
            </div>
            <div class="card-row">
              <label>性别</label>
              <span>{{ filterGender(detail.gender) }}</span>
            </div>
            <div v-show="detail.friend_status == 2" class="card-row">
              <label>备注</label>
              <span v-if="editRemark.isShow == false">{{ detail.nickname_remark ? detail.nickname_remark : '暂无备注' }}</span>
              <span v-else>
                <input
                  v-model="editRemark.text"
                  v-focus
                  class="friend-remark"
                  type="text"
                  @keyup.enter="editRemarkSubmit"
                />
              </span>
              <el-icon v-show="!editRemark.isShow" @click="clickEditRemark"><ele-Edit /></el-icon>
            </div>
            <div class="card-row">
              <label>邮箱</label>
              <span>未设置</span>
            </div>
          </div>
        </el-main>
        <el-footer
          v-show="detail.friend_status !== 0 && uid != user_id"
          class="no-padding footer"
          height="50px"
        >
          <el-button
            v-if="detail.friend_status == 1 && detail.friend_apply == 0"
            type="primary"
            size="default"
            :icon="Plus"
            @click="apply.isShow = true"
            >添加好友
          </el-button>
          <el-button
            v-else-if="detail.friend_apply == 1"
            type="primary"
            size="default"
            >已发送好友申请，请耐心等待...
          </el-button>
          <el-button
            v-else-if="detail.friend_status == 2"
            type="primary"
            size="default"
            :icon="Promotion"
            @click="sendMessage(detail)"
            >发消息
          </el-button>
        </el-footer>

        <!-- 添加好友申请表单 -->
        <div v-outside="closeApply" class="friend-from" :class="{ 'friend-from-show': apply.isShow }">
          <p>
            <span>请填写好友申请备注：</span>
            <span @click="closeApply">取消</span>
          </p>
          <div>
            <input v-model="apply.text" type="text" placeholder="(必填项)" @keyup.enter="sendApply" />
            <el-button type="primary" size="default" @click="sendApply">
              立即提交
            </el-button>
          </div>
        </div>
      </el-container>
    </div>
  </el-dialog>
</template>

<script>
import { Plus, Promotion } from '@element-plus/icons-vue' 
import { reactive, toRefs, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { toTalk } from '/@/views/chat/utils/talk.js'
import { useChatApi } from '/@/api/chat/index'
import detaultAvatar from '/@/assets/detault-avatar.jpg'
import { useUserInfo } from '/@/stores/userInfo'

export default {
    name: 'UserCardDetail',
    props: {
        user_id: {
            type: [Number,String],
            default: 0
        },
        show: {
          type: Boolean,
          default: false
        }
    },
    emits: ['editRemarkCallbak', 'update:show'],
    setup(props, context) {
        const { user_id, show } = toRefs(props)
        const chatApi = useChatApi()
        const userInfo = useUserInfo()
        const visible = computed({
            get: () => show.value,
            set: val => {
                context.emit('update:show', val)
            }
        })
        // 当前登录账号的uid
        const uid = computed(() => {
          return userInfo.websocketInfos.uid
        })
        const state = reactive({
            detail: {
                mobile: '',
                nickname: '',
                avatar: detaultAvatar,
                motto: '',
                friend_status: 0,
                friend_apply: 0,
                nickname_remark: '',
                bag: '',
                gender: 0
            },
            // 好友备注表单
            editRemark: {
                isShow: false,
                text: '',
            },
            // 好友申请表单
            apply: {
                isShow: false,
                text: '',
            },
            contacts: false
        })
        const close = () => {
            if (state.contacts) return false
            context.emit('update:show', false)
            visible.value = false
        }
        // 点击编辑备注信息
        const clickEditRemark = () => {
            state.editRemark.isShow = true
            state.editRemark.text = state.detail.nickname_remark
        }
        // 获取用户信息
        const loadUserDetail = () => {
            chatApi.ServeSearchUser({
                user_id: user_id.value,
            }).then(res => {
                if (res.code == 0) {
                    state.detail.user_id = res.data.id
                    Object.assign(state.detail, res.data)
                }
            })
        }
        // 发送添加好友申请
        const sendApply = () => {
            if (state.apply.text == '') return
            chatApi.ServeCreateContact({
                friend_id: state.detail.user_id,
                remark: state.apply.text,
            }).then(res => {
                if (res.code == 0) {
                    state.apply.isShow = false
                    state.apply.text = ''
                    state.detail.friend_apply = 1
                } else {
                    ElMessage.error('发送好友申请失败,请稍后再试...')
                }
            })
        }
        // 编辑好友备注信息
        const editRemarkSubmit = () => {
            let data = {
              friendId: state.detail.user_id,
              friendRemark: state.editRemark.text,
            }
            if (data.remarks == state.detail.nickname_remark) {
                state.editRemark.isShow = false
                return
            }
            chatApi.ServeEditContactRemark(data).then(res => {
                if (res.code == 0) {
                    state.editRemark.isShow = false
                    state.detail.nickname_remark = data.remarks
                    context.emit('editRemarkCallbak', data)
                }
            })
        }
        // 隐藏申请表单
        const closeApply = () => {
            state.apply.isShow = false
        }
        // 发送好友消息
        const sendMessage = () => {
            close()
            toTalk(1, user_id.value)
        }
        // filter mobile
        const filterMobile = (value) => {
          return (
            value.substr(0, 3) + ' ' + value.substr(3, 4) + ' ' + value.substr(7, 4)
          )
        }
        // filter gender
        const filterGender = value => {
          let arr = ['未知', '男', '女']
          return arr[value] || '未知'
        }
        watch(() => show.value,
          () => {
            loadUserDetail()
          }
        )
        return {
            ...toRefs(state),
            Plus,
            Promotion,
            close,
            clickEditRemark,
            loadUserDetail,
            sendApply,
            editRemarkSubmit,
            closeApply,
            sendMessage,
            filterMobile,
            filterGender,
            visible,
            detaultAvatar,
            uid
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 350px;
  height: 600px;
  overflow: hidden;
  border-radius: 3px;

  .header {
    position: relative;

    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      color: white;
      transition: all 1s;
      z-index: 1;
      font-size: 20px;
    }

    .img-banner {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      cursor: pointer;
      overflow: hidden;

      img:hover {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-filter: contrast(130%);
        filter: contrast(130%);
      }
      .img-banner-error{  
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, var(--el-color-primary-light-4), var(--el-color-primary-light-6));  
      }
    }
  }

  .main {
    background-color: white;
    padding: 45px 16px 0;
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #f5eeee;

    button {
      width: 90%;
    }
  }
}

.user-header {
  width: 100%;
  height: 80px;
  position: absolute;
  bottom: -40px;
  display: flex;
  flex-direction: row;

  .avatar {
    width: 100px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;

    .avatar-box {
      width: 80px;
      height: 80px;
      background-color: white;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        height: 70px;
        width: 70px;
        border-radius: 50%;
      }
    }
  }

  .nickname {
    flex: auto;
    padding-top: 40px;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;

    span {
      margin-left: 5px;
    }

    .share {
      display: inline-flex;
      // width: 50px;
      height: 22px;
      background: #ff5722;
      color: white;
      align-items: center;
      justify-content: center;
      padding: 3px 8px;
      border-radius: 20px;
      transform: scale(0.7);
      cursor: pointer;
      i {
        margin-top: 2px;
      }
      span {
        font-size: 14px;
        margin-left: 4px;
      }
    }
  }
}

.user-sign {
  min-height: 26px;
  border-radius: 5px;
  padding: 5px;
  line-height: 25px;
  background: #f3f5f7;
  color: #7d7d7d;
  font-size: 12px;
  margin-bottom: 20px;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  position: relative;

  .sign-arrow {
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    border: 5px solid hsla(0, 0%, 96.9%, 0);
    border-bottom-color: #f3f5f7;
    left: 28px;
    top: -9px;
  }
}

.card-rows {
  .card-row {
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    color: #736f6f;

    label {
      margin-right: 25px;
      color: #cbc5c5;
    }

    .friend-remark {
      border-bottom: 1px dashed #bec3d0;
      padding-bottom: 2px;
      color: #736f6f;
      width: 60%;
      padding-right: 5px;
    }

    .el-icon-edit-outline {
      margin-left: 3px !important;
    }
  }
}

/* 好友申请表单 */
.friend-from {
  position: absolute;
  background: var(--next-bg-main-color);
  height: 80px;
  z-index: 2;
  width: 100%;
  bottom: -80px;
  left: 0;
  transition: all 0.5s ease-in-out;
  padding: 0 16px;
  p {
    line-height: 20px;
    padding: 12px 0 5px 0;
    font-size: 13px;

    span {
      &:nth-child(2) {
        float: right;
        color: var(--el-color-primary-light-3);
        cursor: pointer;
      }
    }
  }

  div {
    line-height: 20px;
    padding: 0 0 5px 0;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
  }

  input {
    height: 32px;
    line-height: 30px;
    border-radius: 3px;
    padding: 0 5px;
    margin-right: 5px;
    flex: 1;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  }
}

.friend-from-show {
  bottom: 0;
}
.pointer {
  cursor: pointer;
}
[data-theme='dark'] {
  .container .main {
    background: var(--next-bg-main-color);
    .user-sign{
      background: var(--next-border-columns);
      .sign-arrow{
        border-bottom-color: var(--next-border-columns);
      }
    }
  }
  .container .header .close{
    color: var(--next-border-columns);
  }
  .container .footer{
    background: var(--next-color-disabled);
    border-color: var(--el-border-color-light);
  }
}
</style>